<template>
  <page-wrap
    hide-tab
    bg-color="#fff"
    :show-top="dynamicTitle"
    :title="dynamicTitle"
    back
  >
    <view class="content" :style="'padding-top:' + navHeight + 'px;'">
      <view class="titleContainer">
        <view class="mainTitle">{{ positionName }}</view>
        <view class="subTitle" @click="handleGoToPositionDetail">
          <text class="name">职业介绍</text>
          <u-icon name="arrow-right" color="#676D83" size="24"></u-icon>
        </view>
      </view>
      <view class="matchInfo">
        匹配专业 <text class="num">{{ matchMajorNum }}</text> 个 匹配学校
        <text class="num">{{ matchSchoolNum }}</text> 所
      </view>
      <view class="subjectSelector">
        <view class="choose-subject">
          <view class="choose-title">
            <view class="left">首选</view>
            <view class="right">选择一门学科</view>
          </view>
          <view class="choose-box">
            <view
              :class="
                item.id == currentFirstSubject.id
                  ? 'choose-box-item-selected'
                  : 'choose-box-item'
              "
              v-for="(item, index) in firstSubject"
              :key="index"
              @click="selectFirstSubject(item)"
              >{{ item.name }}
            </view>
          </view>
          <view class="choose-title">
            <view class="left">再选</view>
            <view class="right">选择二门学科</view>
          </view>
          <view class="choose-box">
            <view
              :class="
                currentSecondSubjectList.includes(item)
                  ? 'choose-box-item-selected'
                  : 'choose-box-item'
              "
              v-for="(item, index) in secondSubject"
              :key="index"
              @click="selectSecondSubject(item)"
              >{{ item.name }}
            </view>
          </view>
        </view>
      </view>
      <scroll-view
        class="matchResultList"
        :scroll-y="true"
        :scroll-with-animation="true"
      >
        <template v-if="matchResult.length">
          <view
            class="matchResultItem"
            v-for="(item, index) in matchResult"
            :key="index"
            @click="handleMatchResultItemClick(item)"
          >
            <view class="resultLeft">
              <view class="subjectName">{{ item.subjectTypeDesc }}</view>
              <view class="subjectMatchInfo">
                选科匹配
                <span class="orange">{{ item.professionNum }}</span>
                个专业、<span class="orange">{{ item.collegeNum }}</span>
                所院校
              </view>
            </view>
            <!-- <view class="resultRight">
              <view class="matchValue orange">{{
                item.subjectSelectMatchRate
              }}</view>
              <view class="matchLabel">职业匹配度</view>
            </view> -->
          </view>
        </template>
        <view class="main-content-empty" v-else>
          <Empty
            :baseImg="emptyImg"
            text="此职业暂无推荐该选科方向~"
            textColor="#888"
            :fontWeight="400"
          />
        </view>
      </scroll-view>
    </view>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import Empty from '@/components/Empty.vue';
import { cardRegist } from '@/api/modules/career';
import ShareMixin from '@/mixins/share';
import LoginDialog from '@/components/LoginDialog';
import {
  subjectCombinationList,
  getPositionTemplate,
} from '@/api/modules/career';
export default {
  name: 'jobMatch',
  mixins: [ShareMixin],
  components: {
    Empty,
    LoginDialog,
  },
  data() {
    return {
      personId: '',
      shareTitle: '震惊！同分数段的同学，靠选科组合提前锁定百万年薪赛道',
      sharePath: '/pagesSub/nationalCollegeEntranceExamination/jobMatch/index',
      imageUrl:
        'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png',
      navHeight: getApp().globalData.navHeight,
      positionName: '',
      positionId: '',
      dynamicTitle: '',
      matchMajorNum: '',
      matchSchoolNum: '',
      firstSubject: [
        {
          name: '物理',
          id: '11',
        },
        {
          name: '历史',
          id: '12',
        },
      ],
      secondSubject: [
        {
          name: '化学',
          id: '14',
        },
        {
          name: '生物',
          id: '13',
        },
        {
          name: '政治',
          id: '15',
        },
        {
          name: '地理',
          id: '16',
        },
      ],
      currentFirstSubject: {},
      currentSecondSubjectList: [],
      matchResult: [],
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
    };
  },
  onLoad(opt) {
    console.log('opt', opt);
    this.positionId = opt.positionId;
    this.positionName = opt.positionName;
    this.matchSchoolNum = opt.collegeNum;
    this.matchMajorNum = opt.professionNum;
    this.getSubjectCombinationListFn();
    this.imageUrl =
      'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png'; //必须重新赋值
    this.sharePath = `/pagesSub/nationalCollegeEntranceExamination/jobMatch/index?positionId=${this.positionId}&positionName=${this.positionName}&collegeNum=${this.matchSchoolNum}&professionNum=${this.matchMajorNum}`;
    if (!this.personId) {
      this.$refs.loginDialog.setVisibility(true);
      return;
    }
  },
  onPageScroll(e) {
    //滚动改变颜色
    if (e.scrollTop >= 30) {
      this.dynamicTitle = this.positionName || '';
    } else {
      this.dynamicTitle = '';
    }
  },
  methods: {
    async cardRegistFn() {
      const params = {
        personId: this.personId,
        force: 1,
      };
      params.cardType = 143;
      const res = await cardRegist(params);
      return res;
    },
    loginSuccessBack() {
      //TODO:登录成功后触发埋点
      this.personId = uni.getStorageSync('person-id').slice(2);
      this.cardRegistFn();
    },
    async handleGoToPositionDetail() {
      let params = `positionName=${this.positionName}&positionId=${this.positionId}`;
      //请求接口看是否走新页面
      const templateId = await this.getPositionTemplateFn(this.positionId);
      if (templateId == 6) {
        uni.navigateTo({
          url: `/pagesSub/careerNewPositionDictionary/positionDetail?${params}`,
        });
      } else {
        uni.navigateTo({
          url: `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`,
        });
      }
    },
    async getPositionTemplateFn(positionId) {
      const res = await getPositionTemplate({ positionId: positionId });
      if (res.code == 200) {
        return res.data.templateId;
      } else {
        return 0;
      }
    },
    selectFirstSubject(item) {
      this.currentFirstSubject = item;
      // 此时就调用接口获取数据
      this.getSubjectCombinationListFn();
      // }
    },
    selectSecondSubject(item) {
      if (this.currentSecondSubjectList.includes(item)) {
        this.currentSecondSubjectList.splice(
          this.currentSecondSubjectList.indexOf(item),
          1
        );
        this.getSubjectCombinationListFn();
      } else {
        this.currentSecondSubjectList.push(item);
        if (this.currentSecondSubjectList.length > 2) {
          this.currentSecondSubjectList.shift();
        }
        if (
          this.currentSecondSubjectList.length == 2 &&
          this.currentFirstSubject.id
        ) {
          // 此时就调用接口获取数据
          this.getSubjectCombinationListFn();
        }
      }
    },
    getSubjectCombinationListFn() {
      const currentFirstSubject = this.currentFirstSubject.id;
      const currentSecondSubjectList = this.currentSecondSubjectList
        .map((item) => item.id)
        .join(',');
      const params = {
        positionId: this.positionId,
      };
      if (currentFirstSubject) {
        params.subjectCombination =
          currentFirstSubject + ',' + currentSecondSubjectList;
      }
      subjectCombinationList(params)
        .then((res) => {
          if (res.code == 200) {
            res.data.forEach((item) => {
              item.professionNum = +item.professionNum || 0;
            });
            this.matchResult = res.data.filter(
              (item) => item.professionNum > 0
            );
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleMatchResultItemClick(item) {
      uni.navigateTo({
        url: `/pagesSub/nationalCollegeEntranceExamination/positionMatchDetail/index?positionId=${this.positionId}&subjectTypeDesc=${item.subjectTypeDesc}&positionName=${this.positionName}&professionNum=${item.professionNum}&collegeNum=${item.collegeNum}&relSubject=${item.relSubject}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-image: url($img-base + 'career/positionDictionary/bg_major_searchhome.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 0 16rpx 40rpx;
  .titleContainer {
    margin-top: 20rpx;
    padding-left: 16rpx;
    font-family: PingFang-SC, PingFang-SC;
    .mainTitle {
      font-weight: bold;
      font-size: 44rpx;
      color: #000000;
      line-height: 60rpx;
      margin-bottom: 14rpx;
    }
    .subTitle {
      font-size: 28rpx;
      color: #52586d;
      display: flex;
      align-items: center;
      .name {
        margin-right: 16rpx;
      }
    }
  }
  .matchInfo {
    margin-top: 44rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #52586d;
    line-height: 40rpx;
    padding-left: 16rpx;
    .num {
      color: #f75a3e;
      padding: 0 10rpx;
    }
  }
  .subjectSelector {
    .choose-subject {
      background: #ffffff;
      border-radius: 24rpx;
      margin-top: 46rpx;
      padding: 34rpx 34rpx 6rpx 34rpx;
      .choose-title {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        .left {
          height: 42rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #222222;
          line-height: 42rpx;
        }
        .right {
          height: 36rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
          line-height: 36rpx;
          margin-left: 24rpx;
        }
      }
      .choose-box {
        margin: 28rpx 0 40rpx 0;
        display: flex;
        align-items: center;
        .choose-box-item,
        .choose-box-item-selected {
          width: 146rpx;
          height: 72rpx;
          border-radius: 8rpx;
          margin-right: 16rpx;
          font-size: 28rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
        }
        .choose-box-item {
          border: 2rpx solid #d9d9d9;
          color: #333333;
        }
        .choose-box-item-selected {
          border: 2rpx solid #f75a3e;
          color: #f75a3e;
        }
      }
      .show-data {
        height: 78rpx;
        background: #f5fbff;
        border-radius: 8rpx 8rpx 0rpx 0rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .blue-column {
          width: 2rpx;
          height: 38rpx;
          border: 2rpx solid #b6d5e8;
          margin: 0 30rpx;
          background-color: #b6d5e8;
        }
        .left-data {
          color: #4079a8;
          font-size: 24rpx;
          span {
            margin-left: 8rpx;
            font-size: 28rpx;
            color: #ff8c00;
          }
        }
        .right-data {
          color: #4079a8;
          font-size: 24rpx;
          span {
            margin-left: 8rpx;
            font-size: 28rpx;
            color: #00ac51;
          }
        }
      }
      .search-btn {
        height: 80rpx;
        background: #f75a3e;
        border-radius: 8rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 30rpx;
        color: #ffffff;
      }
    }
  }
  .matchResultList {
    // height: calc(100vh - 700rpx);
    .matchResultItem {
      display: flex;
      justify-content: space-between;
      padding: 36rpx 32rpx;
      background-color: white;
      margin-top: 16rpx;
      .resultLeft {
        .subjectName {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #222222;
          line-height: 36rpx;
        }
        .subjectMatchInfo {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #888888;
          line-height: 36rpx;
          margin-top: 16rpx;
        }
      }
      .resultRight {
        .matchValue {
          font-family: D-DIN-PRO, D-DIN-PRO;
          font-weight: bold;
          font-size: 36rpx;
          color: #f7654b;
          line-height: 36rpx;
        }
        .matchLabel {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #888888;
          line-height: 36rpx;
          margin-top: 14rpx;
        }
      }
    }
    .orange {
      color: #f7654b;
    }
  }
}
</style>
